<template>
  <div>
    <div class="mui-input-group">
      <div class="mui-input-row">
          <label>用户名</label>
          <input type="text" class="mui-input-clear" v-model="loginForm.username" placeholder="请输入用户名">
      </div>
      <div class="mui-input-row">
          <label>密码</label>
          <input type="password" v-model="loginForm.password" class="mui-input-password" placeholder="请输入密码">
      </div>
    </div>
    <button class="btn" @click="login">登录</button>
    <router-link to="/user/register" class="register">还没有账号？前往注册</router-link>
  </div>
  
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  created() {

  },
  methods: {
    // 登录
    login() {
      // 验证username和password非空
      if (this.loginForm.username !== '' && this.loginForm.password !== '') {
        this.$http.post('login', this.loginForm).then(res => {
          if (res.data.code === 1) {
            // 登录成功
            // 登录成功后，需要将用户信息保存到Vuex 中
            this.$store.commit('user/setUser',res.data.data);
            // 记录session
            this.$auth.setAuthorization(res.data.data.session_id)

            this.$router.push('/user')
            this.$toast('登录成功')
          } else {
            this.$toast(res.data.msg)
          }
        })
      } else {
        this.$toast('用户名和密码不能为空!')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.mui-input-group {
  margin-top: 10px;
  background-color: transparent;
  .mui-input-row {
    margin-top: 10px;
    background-color: #fff;
    label {
      width: 25%;
    }
    .mui-input-clear, .mui-input-password {
      width: 75%;
    }
  }
  
}
.btn {
    width: 90%;
    margin-left: 5%;
    margin-top: 20px;
    background-color: rgb(0, 122, 255);
    color: #fff;
    font-size: 16px;
  }
.register {
  display: block;
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
}
</style>